<template>
	<view>
		<view class="header">
			<view class="home-content">
				<view class="home-title">
					<uni-icons
						type="left"
						color="#fff"
						size="20"
						@click="back_reload"></uni-icons>
					<view class="btn">{{ "新增" }}</view>
				</view>
			</view>
		</view>
		<view class="choose">
			<view
				v-for="(item, index) in list"
				:key="index"
				:style="
					item.desable == true ? 'background-color:#2163E0;color:#fff;' : ''
				"
				@click="chooseBar(index)"
				>{{ item.name }}
			</view>
		</view>
		<view class="dynamic" v-if="dynamicStatus">
			<uni-forms
				ref="baseForm"
				:rules="rules"
				:modelValue="baseFormData"
				:label-width="80">
				<uni-forms-item label="标题" required name="dynamicTitle">
					<uni-easyinput
						v-model="baseFormData.dynamicTitle"
						placeholder="请输入动态标题" />
				</uni-forms-item>
				<uni-forms-item label="动态内容" required name="dynamicContent">
					<uni-easyinput
						type="textarea"
						v-model="baseFormData.dynamicContent"
						placeholder="请输入动态内容" />
				</uni-forms-item>
			</uni-forms>
			<view class="file">
				<uni-file-picker
					limit="3"
					title="最多选择3张图片"
					@select="filePicker"></uni-file-picker>
			</view>
			<button type="primary" style="margin-top: 20px;" @click="submit('baseForm')">提交</button>
		</view>
		<view class="dynamic" v-else>
			<uni-forms
				ref="Form"
				:rules="rule"
				:modelValue="baseForm"
				:label-width="80">
				<uni-forms-item label="标题" required name="demandTitle">
					<uni-easyinput
						v-model="baseForm.demandTitle"
						placeholder="请输入需求标题" />
				</uni-forms-item>
				<uni-forms-item label="需求内容" required name="demandContent">
					<uni-easyinput
						type="textarea"
						v-model="baseForm.demandContent"
						placeholder="请输入需求内容" />
				</uni-forms-item>

				<uni-forms-item label="有效期至" required name="effectiveTime">
					<uni-datetime-picker
						@change="choose"
						type="date"
						return-type="timestamp"
						v-model="baseForm.effectiveTime"
						:start="new Date().getTime()"
						/>
				</uni-forms-item>
				<uni-forms-item required label="协助部门">
					<niceui-data-select-input
						v-model="value"
						:localdata="arrList"
						placeholder="请搜索或选择"
						@change="change(value)"></niceui-data-select-input>
				</uni-forms-item>
				<button type="primary" @click="sub('Form')">提交</button>
			</uni-forms>
			<view class="selectBar">
				<view
					class="select-item"
					v-for="(item, index) in selectBar"
					:key="index"
					@click="dele(index)">
					{{ item }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from "../../api/api";
import img from "../assets/fail.png";
export default {
	onReady() {
		this.getTreeList();
	},
	onLoad() {},
	data() {
		return {
			value: null,
			list: [
				{
					name: "动态",
					desable: true,
				},
				{
					name: "需求",
					desable: false,
				},
			],
			dynamicStatus: true,
			rules: {
				dynamicTitle: {
					rules: [
						{
							required: true,
							errorMessage: "标题不能为空",
						},
					],
				},
				dynamicContent: {
					rules: [
						{
							required: true,
							errorMessage: "内容不能为空",
						},
					],
				},
			},
			rule: {
				demandTitle: {
					rules: [
						{
							required: true,
							errorMessage: "标题不能为空",
						},
					],
				},
				demandContent: {
					rules: [
						{
							required: true,
							errorMessage: "内容不能为空",
						},
					],
				},
				effectiveTime: {
					rules: [
						{
							required: true,
							errorMessage: "请选择有效期",
						},
					],
				},
			},
			baseForm: {
				deptIds: [],
			},
			baseFormData: {
				demandStatus: '2',
				hyDynamicImgList: [],
			},
			arrList: [],
			selectBar: [],
		};
	},
	methods: {
		choose(val) {
			if (val.toString().length == 10) {
				var date = new Date(val * 1000);
			} else {
				var date = new Date(val);
			}
			var Y = date.getFullYear() + "-";
			var M =
				(date.getMonth() + 1 < 10
					? "0" + (date.getMonth() + 1)
					: date.getMonth() + 1) + "-";
			var D =
				(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
			var h = date.getHours() + ":";
			var m = date.getMinutes() + ":";
			var s = date.getSeconds();
			let time = Y + M + D + h + m + s;
			this.baseForm.effectiveTime = time;
		},
		sub(ref) {
			this.$refs[ref]
				.validate()
				.then(() => {
					api.addHyDemand(this.baseForm).then((e) => {
						if (e.data.code == 200) {
							uni.showToast({
								title: "提交成功!",
							});
							this.baseForm = {
								deptIds: [],
							};
							this.selectBar = [];
							this.value = null;
							this.back_reload();
						}
					});
				})
				.catch((err) => {
					console.log("err", err);
				});
		},
		dele(val) {
			this.selectBar.splice(val, 1);
			this.baseForm.deptIds.splice(val, 1);
		},
		change(val) {
			let data = this.arrList.find((item) => item.value == val);
			this.selectBar.push(data.text);
			this.baseForm.deptIds.push(val);
		},
		back_reload() {
			let pages = getCurrentPages();
			uni.navigateBack({
				delta: 1,
				success() {
					pages[pages.length - 2].$vm.reloadList();
				},
			});
		},
		progress(val) {
			console.log(val);
		},
		chooseBar(val) {
			this.list[val].desable = true;
			for (let i = 0; i < this.list.length; i++) {
				if (i != val) {
					this.list[i].desable = false;
				}
			}
			if (this.list[0].desable != true) {
				this.dynamicStatus = false;
			} else {
				this.dynamicStatus = true;
			}
		},
		filePicker(val) {
			var data = {
				files: val.tempFilePaths[0],
			};
			api.upload(data).then((e) => {
				if (e.code == 200) {
					var child = {
						dynamicImg: e.result[0],
					};
					this.baseFormData.hyDynamicImgList.push(child);
				}
			});
		},
		submit(ref) {
			this.$refs[ref]
				.validate()
				.then(() => {
					if (
						this.baseFormData.hyDynamicImgList.length == 0 ||
						this.baseFormData.hyDynamicImgList == []
					) {
						uni.showToast({
							title: "请上传至少一张动态图片!",
							image: img,
						});
					} else {
						api.add(this.baseFormData).then((e) => {
							if (e.data.code == 200) {
								console.log(e);
								uni.showToast({
									title: "提交成功!",
								});
								this.back_reload();
								setTimeout(() => {
									window.location.reload();
								}, 500);
							}
						});
					}
				})
				.catch((err) => {
					console.log("err", err);
				});
		},
		getTreeList() {
			api.queryTreeList().then((e) => {
				if (e.data.code == 0) {
					//var arr = e.data.result[0];
					e.data.result.forEach((arr) => {
						arr.children.forEach((item) => {
							if (item.children != null || item.children != []) {
								item.children.forEach((items) => {
									var child = {
										text: items.departName,
										value: items.id,
									};
									this.arrList.push(child);
								});
							}
						});
					});
				}
			});
		},
	},
	mounted() {
		var name = uni.getStorageSync('DetailName');
		console.log(name)
	},
};
</script>

<style lang="scss" scoped>
.header {
	height: 50px;
	width: 100vw;
	.home-content {
		height: 50px;
		width: 100vw;
		position: fixed;
		top: 0;
		color: #fff;
		font-weight: 700;
		.home-title {
			position: relative;
			width: 100%;
			height: 50px;
			line-height: 50px;
			background-color: #2163e0;
			padding-left: 10px;
			.btn {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
	}
}
.choose {
	width: 100vw;
	height: 60px;
	display: flex;
	justify-content: space-between;
	view {
		width: 49%;
		height: 60px;
		line-height: 60px;
		font-weight: 700;
		font-size: 18px;
		text-align: center;
	}
}
.dynamic {
	width: 80vw;
	margin: 10px auto;
	::v-deep .file-picker__box-content {
		background-color: #fff;
	}
	.btn {
		width: 50vw;
		margin: 10px auto;
	}
	.selectBar {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.select-item {
			margin-top: 10px;
			flex: 1 0 calc(33%);
			width: 80px;
			padding: 5px;
			background-color: #ccc;
			font-size: 12px;
			color: #fff;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}
	}
}
</style>
